<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>文章列表</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #4F46E5;
      --secondary: #6B7280;
      --light: #F9FAFB;
      --dark: #1F2937;
      --white: #FFFFFF;
      --border: #E5E7EB;
      --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      --success: #10B981;
      --warning: #F59E0B;
      --danger: #EF4444;
      --info: #3B82F6;
      
      /* 不同风格主题色 */
      --style1: #3B82F6; /* 科技蓝 */
      --style2: #EC4899; /* 活力粉 */
      --style3: #10B981; /* 生态绿 */
      --style4: #F59E0B; /* 温暖橙 */
      --style5: #8B5CF6; /* 梦幻紫 */
      --style6: #111827; /* 商务黑 */
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f5f5;
      color: var(--dark);
      min-height: 100vh;
      padding: 0;
      margin: 0;
      transition: background-color 0.3s ease;
    }
    
    .container {
      max-width: 420px;
      margin: 0 auto;
      background-color: var(--white);
      min-height: 100vh;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
      transition: background-color 0.3s ease;
    }
    
    /* 主页面容器 */
    .article-page {
      display: none;
      min-height: 100vh;
      flex-direction: column;
    }
    
    .article-page.active {
      display: flex;
      animation: fadeIn 0.3s ease forwards;
    }
    
    /* 顶部导航栏 */
    .page-header {
      padding: 18px 20px;
      position: relative;
      text-align: center;
      border-bottom: 1px solid var(--border);
      background-color: var(--white);
      transition: all 0.3s ease;
      z-index: 10;
    }
    
    .page-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .header-actions {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      gap: 15px;
    }
    
    .header-btn {
      background: none;
      border: none;
      color: var(--dark);
      font-size: 20px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .header-btn:active {
      transform: scale(0.9);
    }
    
    /* 搜索栏 */
    .search-bar {
      padding: 12px 20px;
      background-color: var(--light);
      border-bottom: 1px solid var(--border);
    }
    
    .search-input {
      width: 100%;
      padding: 10px 15px;
      background-color: var(--white);
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 14px;
      transition: all 0.2s ease;
    }
    
    .search-input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
    }
    
    /* 分类栏 */
    .category-bar {
      padding: 10px 0;
      overflow-x: auto;
      white-space: nowrap;
      border-bottom: 1px solid var(--border);
      background-color: var(--white);
    }
    
    .category-scroll {
      padding: 0 20px;
    }
    
    .category-btn {
      display: inline-block;
      padding: 6px 15px;
      margin-right: 8px;
      background: none;
      border: none;
      font-size: 15px;
      font-weight: 500;
      color: var(--secondary);
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
    }
    
    .category-btn.active {
      color: var(--primary);
    }
    
    .category-btn.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
      height: 3px;
      background-color: var(--primary);
      border-radius: 3px;
    }
    
    /* 内容区域 */
    .content {
      flex-grow: 1;
      overflow-y: auto;
    }
    
    /* 文章列表 */
    .article-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .article-item {
      padding: 15px 20px;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      transition: background-color 0.2s ease;
    }
    
    .article-item:hover {
      background-color: var(--light);
    }
    
    .article-header {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    
    .article-author-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-color: var(--primary);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      margin-right: 10px;
      flex-shrink: 0;
    }
    
    .article-author-info {
      flex-grow: 1;
    }
    
    .article-author {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 2px;
    }
    
    .article-time {
      font-size: 12px;
      color: var(--secondary);
    }
    
    .article-content {
      margin-bottom: 10px;
    }
    
    .article-title {
      font-size: 16px;
      font-weight: 600;
      line-height: 1.4;
      margin-bottom: 8px;
    }
    
    .article-excerpt {
      font-size: 14px;
      color: var(--secondary);
      line-height: 1.5;
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    /* 图片容器 - 支持0-9张图片布局 */
    .article-images {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-bottom: 10px;
    }
    
    .article-image {
      background-color: #f0f0f0;
      border-radius: 6px;
      overflow: hidden;
      position: relative;
      background-size: cover;
      background-position: center;
    }
    
    /* 不同数量图片的布局 */
    .img-count-1 .article-image {
      width: 100%;
      height: 200px;
    }
    
    .img-count-2 .article-image,
    .img-count-4 .article-image {
      width: calc(50% - 2px);
      height: 140px;
    }
    
    .img-count-3 .article-image:nth-child(1) {
      width: 100%;
      height: 140px;
    }
    
    .img-count-3 .article-image:nth-child(2),
    .img-count-3 .article-image:nth-child(3) {
      width: calc(50% - 2px);
      height: 100px;
    }
    
    .img-count-5 .article-image:nth-child(1),
    .img-count-5 .article-image:nth-child(2) {
      width: 50%;
      height: 140px;
    }
    
    .img-count-5 .article-image:nth-child(3),
    .img-count-5 .article-image:nth-child(4),
    .img-count-5 .article-image:nth-child(5) {
      width: calc(33.333% - 2.66px);
      height: 80px;
    }
    
    .img-count-6 .article-image {
      width: calc(33.333% - 2.66px);
      height: 100px;
    }
    
    .img-count-7 .article-image:nth-child(1) {
      width: 100%;
      height: 140px;
    }
    
    .img-count-7 .article-image:nth-child(n+2) {
      width: calc(33.333% - 2.66px);
      height: 80px;
    }
    
    .img-count-8 .article-image:nth-child(1),
    .img-count-8 .article-image:nth-child(2) {
      width: 50%;
      height: 140px;
    }
    
    .img-count-8 .article-image:nth-child(n+3) {
      width: calc(33.333% - 2.66px);
      height: 80px;
    }
    
    .img-count-9 .article-image {
      width: calc(33.333% - 2.66px);
      height: 90px;
    }
    
    /* 图片数量超过4张时显示剩余数量 */
    .img-more {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 500;
    }
    
    .article-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 5px;
    }
    
    .action-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      background: none;
      border: none;
      color: var(--secondary);
      font-size: 13px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .action-btn:active {
      transform: scale(0.95);
    }
    
    .action-btn:hover {
      color: var(--primary);
    }
    
    /* 加载更多 */
    .load-more {
      padding: 20px 20px;
      text-align: center;
    }
    
    .load-more-btn {
      background: none;
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 8px 16px;
      font-size: 14px;
      color: var(--primary);
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .load-more-btn:hover {
      background-color: var(--light);
    }
    
    .load-more-btn:active {
      transform: scale(0.98);
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1010;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
      transition: all 0.3s ease;
      transform: translateX(0);
      opacity: 1;
    }
    
    .style-switcher.hidden {
      transform: translateX(200px);
      opacity: 0;
      pointer-events: none;
    }
    
    .switcher-toggle {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1020;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: var(--primary);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow);
      border: none;
      font-size: 18px;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .switcher-close {
      background: none;
      border: none;
      color: var(--secondary);
      font-size: 16px;
      cursor: pointer;
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s;
      display: flex;
      align-items: center;
    }
    
    .switcher-color {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-right: 10px;
    }
    
    .switcher-option:hover {
      background-color: #f9f9f9;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 风格1：科技蓝 */
    .style-1 {
      --primary: var(--style1);
    }
    
    .style-1 .article-item {
      border-left: 3px solid transparent;
    }
    
    .style-1 .article-item:hover {
      border-left-color: var(--primary);
    }
    
    .style-1 .article-image {
      transition: transform 0.3s ease;
    }
    
    .style-1 .article-item:hover .article-image {
      transform: scale(1.02);
    }
    
    /* 风格2：活力粉 */
    .style-2 {
      --primary: var(--style2);
    }
    
    .style-2 .page-header {
      background-color: var(--primary);
      color: white;
      border-bottom: none;
    }
    
    .style-2 .header-btn {
      color: white;
    }
    
    .style-2 .article-image {
      border-radius: 12px;
    }
    
    .style-2 .article-actions {
      background-color: rgba(236, 72, 153, 0.03);
      padding: 8px 10px;
      border-radius: 8px;
    }
    
    /* 风格3：生态绿 */
    .style-3 {
      --primary: var(--style3);
    }
    
    .style-3 .container {
      background-color: #F8FAFC;
    }
    
    .style-3 .article-item {
      background-color: var(--white);
      margin: 10px;
      border-radius: 10px;
      border-bottom: none;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }
    
    .style-3 .category-bar,
    .style-3 .search-bar {
      background-color: transparent;
      border-bottom: none;
    }
    
    /* 风格4：温暖橙 */
    .style-4 {
      --primary: var(--style4);
    }
    
    .style-4 .page-title {
      color: var(--primary);
      font-weight: 700;
    }
    
    .style-4 .article-author-avatar {
      box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
    }
    
    .style-4 .action-btn.active {
      color: var(--primary);
    }
    
    .style-4 .category-btn.active {
      background-color: rgba(245, 158, 11, 0.1);
      border-radius: 20px;
    }
    
    /* 风格5：梦幻紫 */
    .style-5 {
      --primary: var(--style5);
    }
    
    .style-5 .container {
      background-color: #FCFAFF;
    }
    
    .style-5 .article-title {
      color: var(--primary);
    }
    
    .style-5 .article-excerpt {
      color: #5B21B6;
      opacity: 0.8;
    }
    
    .style-5 .article-image {
      border: 2px solid white;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    /* 风格6：商务黑 */
    .style-6 {
      --primary: #60A5FA;
      --secondary: #9CA3AF;
      --light: #1F2937;
      --dark: #F9FAFB;
      --white: #111827;
      --border: #374151;
      --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    }
    
    .style-6 body {
      background-color: #030712;
    }
    
    .style-6 .container {
      background-color: var(--white);
    }
    
    .style-6 .page-header {
      background-color: var(--light);
      border-bottom-color: var(--border);
    }
    
    .style-6 .header-btn,
    .style-6 .page-title {
      color: var(--dark);
    }
    
    .style-6 .search-bar,
    .style-6 .category-bar {
      background-color: var(--light);
      border-bottom-color: var(--border);
    }
    
    .style-6 .search-input {
      background-color: var(--white);
      border-color: var(--border);
      color: var(--dark);
    }
    
    .style-6 .article-item {
      border-bottom-color: var(--border);
    }
    
    .style-6 .article-item:hover {
      background-color: var(--light);
    }
    
    .style-6 .load-more-btn {
      border-color: var(--border);
      color: var(--primary);
    }
    
    .style-6 .style-switcher {
      background-color: var(--light);
    }
    
    .style-6 .switcher-header {
      border-bottom-color: var(--border);
      color: var(--dark);
    }
    
    .style-6 .switcher-option {
      color: var(--dark);
    }
    
    .style-6 .switcher-option:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    
    .loading {
      animation: spin 1s linear infinite;
    }
    
    /* 响应式调整 */
    @media (max-width: 360px) {
      .article-title {
        font-size: 15px;
      }
      
      .img-count-1 .article-image {
        height: 160px;
      }
      
      .img-count-2 .article-image,
      .img-count-4 .article-image {
        height: 120px;
      }
    }
  </style>
</head>
<body class="style-1">
  <!-- 样式切换器 -->
  <button class="switcher-toggle">
    <i class="fa fa-paint-brush"></i>
  </button>
  
  <div class="style-switcher hidden">
    <div class="switcher-header">
      选择页面样式
      <button class="switcher-close"><i class="fa fa-times"></i></button>
    </div>
    <div class="switcher-option active" data-style="1">
      <span class="switcher-color" style="background-color: var(--style1);"></span>
      科技蓝
    </div>
    <div class="switcher-option" data-style="2">
      <span class="switcher-color" style="background-color: var(--style2);"></span>
      活力粉
    </div>
    <div class="switcher-option" data-style="3">
      <span class="switcher-color" style="background-color: var(--style3);"></span>
      生态绿
    </div>
    <div class="switcher-option" data-style="4">
      <span class="switcher-color" style="background-color: var(--style4);"></span>
      温暖橙
    </div>
    <div class="switcher-option" data-style="5">
      <span class="switcher-color" style="background-color: var(--style5);"></span>
      梦幻紫
    </div>
    <div class="switcher-option" data-style="6">
      <span class="switcher-color" style="background-color: var(--style6);"></span>
      商务黑
    </div>
  </div>
  
  <div class="container">
    <!-- 风格1：科技蓝 -->
    <div class="article-page active" id="page1">
      <div class="page-header">
        <h1 class="page-title">推荐文章</h1>
        <div class="header-actions">
          <button class="header-btn" id="refresh1"><i class="fa fa-refresh"></i></button>
          <button class="header-btn" id="menu1"><i class="fa fa-ellipsis-v"></i></button>
        </div>
      </div>
      
      <div class="search-bar">
        <input type="text" class="search-input" placeholder="搜索文章...">
      </div>
      
      <div class="category-bar">
        <div class="category-scroll">
          <button class="category-btn active">推荐</button>
          <button class="category-btn">科技</button>
          <button class="category-btn">美食</button>
          <button class="category-btn">旅行</button>
          <button class="category-btn">娱乐</button>
          <button class="category-btn">体育</button>
          <button class="category-btn">健康</button>
        </div>
      </div>
      
      <div class="content">
        <ul class="article-list" id="articleList1">
          <!-- 0张图片 -->
          <li class="article-item img-count-0">
            <div class="article-header">
              <div class="article-author-avatar">张</div>
              <div class="article-author-info">
                <div class="article-author">张三</div>
                <div class="article-time">今天 08:30</div>
              </div>
            </div>
            <div class="article-content">
              <div class="article-title">如何提高工作效率？分享几个实用技巧</div>
              <div class="article-excerpt">在当今快节奏的工作环境中，提高工作效率成为每个人的追求。本文将分享几个经过实践检验的实用技巧，帮助你更高效地完成工作任务...</div>
            </div>
            <div class="article-actions">
              <button class="action-btn"><i class="fa fa-thumbs-o-up"></i> 245</button>
              <button class="action-btn"><i class="fa fa-comment-o"></i> 36</button>
              <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
            </div>
          </li>
          
          <!-- 1张图片 -->
          <li class="article-item img-count-1">
            <div class="article-header">
              <div class="article-author-avatar">李</div>
              <div class="article-author-info">
                <div class="article-author">李四</div>
                <div class="article-time">昨天 15:45</div>
              </div>
            </div>
            <div class="article-content">
              <div class="article-title">城市日落摄影：捕捉最美的黄昏时刻</div>
              <div class="article-excerpt">日落时分的光线变化万千，是摄影爱好者的黄金时段。这组照片拍摄于城市不同角落，记录了一天中最温暖的光影瞬间...</div>
              <div class="article-images">
                <div class="article-image" style="background-image: url('https://picsum.photos/id/1015/800/600');"></div>
              </div>
            </div>
            <div class="article-actions">
              <button class="action-btn"><i class="fa fa-thumbs-o-up"></i> 562</button>
              <button class="action-btn"><i class="fa fa-comment-o"></i> 89</button>
              <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
            </div>
          </li>
          
          <!-- 3张图片 -->
          <li class="article-item img-count-3">
            <div class="article-header">
              <div class="article-author-avatar">王</div>
              <div class="article-author-info">
                <div class="article-author">王五</div>
                <div class="article-time">06-12</div>
              </div>
            </div>
            <div class="article-content">
              <div class="article-title">周末郊外徒步之旅，感受大自然的魅力</div>
              <div class="article-excerpt">远离城市喧嚣，走进自然怀抱。这次徒步路线风景优美，难度适中，非常适合周末放松身心，重新充电...</div>
              <div class="article-images">
                <div class="article-image" style="background-image: url('https://picsum.photos/id/10/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/11/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/12/800/600');"></div>
              </div>
            </div>
            <div class="article-actions">
              <button class="action-btn"><i class="fa fa-thumbs-o-up"></i> 328</button>
              <button class="action-btn"><i class="fa fa-comment-o"></i> 45</button>
              <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
            </div>
          </li>
          
          <!-- 6张图片 -->
          <li class="article-item img-count-6">
            <div class="article-header">
              <div class="article-author-avatar">赵</div>
              <div class="article-author-info">
                <div class="article-author">赵六</div>
                <div class="article-time">06-10</div>
              </div>
            </div>
            <div class="article-content">
              <div class="article-title">探访本地特色市场，发现隐藏的美食宝藏</div>
              <div class="article-excerpt">每个城市都有其独特的市场文化，这里不仅有新鲜的食材，更有许多本地人才知道的美食摊位...</div>
              <div class="article-images">
                <div class="article-image" style="background-image: url('https://picsum.photos/id/292/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/293/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/294/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/295/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/296/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/297/800/600');"></div>
              </div>
            </div>
            <div class="article-actions">
              <button class="action-btn"><i class="fa fa-thumbs-o-up"></i> 412</button>
              <button class="action-btn"><i class="fa fa-comment-o"></i> 67</button>
              <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
            </div>
          </li>
          
          <!-- 9张图片 -->
          <li class="article-item img-count-9">
            <div class="article-header">
              <div class="article-author-avatar">孙</div>
              <div class="article-author-info">
                <div class="article-author">孙七</div>
                <div class="article-time">06-08</div>
              </div>
            </div>
            <div class="article-content">
              <div class="article-title">七日欧洲小城之旅，感受不一样的异域风情</div>
              <div class="article-excerpt">避开热门旅游景点，选择了几个欧洲小众城市，体验当地真实的生活节奏和文化氛围...</div>
              <div class="article-images">
                <div class="article-image" style="background-image: url('https://picsum.photos/id/42/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/43/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/44/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/45/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/46/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/47/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/48/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/49/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/50/800/600');"></div>
              </div>
            </div>
            <div class="article-actions">
              <button class="action-btn"><i class="fa fa-thumbs-o-up"></i> 786</button>
              <button class="action-btn"><i class="fa fa-comment-o"></i> 124</button>
              <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
            </div>
          </li>
        </ul>
        
        <div class="load-more">
          <button class="load-more-btn" id="loadMore1">
            加载更多
          </button>
        </div>
      </div>
    </div>
    
    <!-- 风格2：活力粉 -->
    <div class="article-page" id="page2">
      <div class="page-header">
        <h1 class="page-title">热门文章</h1>
        <div class="header-actions">
          <button class="header-btn" id="refresh2"><i class="fa fa-refresh"></i></button>
          <button class="header-btn" id="menu2"><i class="fa fa-ellipsis-v"></i></button>
        </div>
      </div>
      
      <div class="search-bar">
        <input type="text" class="search-input" placeholder="搜索感兴趣的内容...">
      </div>
      
      <div class="category-bar">
        <div class="category-scroll">
          <button class="category-btn active">全部</button>
          <button class="category-btn">时尚</button>
          <button class="category-btn">美妆</button>
          <button class="category-btn">穿搭</button>
          <button class="category-btn">生活</button>
          <button class="category-btn">情感</button>
          <button class="category-btn">职场</button>
        </div>
      </div>
      
      <div class="content">
        <ul class="article-list" id="articleList2">
          <!-- 0张图片 -->
          <li class="article-item img-count-0">
            <div class="article-header">
              <div class="article-author-avatar">林</div>
              <div class="article-author-info">
                <div class="article-author">林小雨</div>
                <div class="article-time">今天 09:15</div>
              </div>
            </div>
            <div class="article-content">
              <div class="article-title">夏日护肤小技巧，告别油腻保持清爽</div>
              <div class="article-excerpt">夏季气温升高，皮肤容易出油出汗，如何保持肌肤清爽同时又不缺水？分享几个我的夏日护肤秘诀...</div>
            </div>
            <div class="article-actions">
              <button class="action-btn"><i class="fa fa-thumbs-o-up"></i> 632</button>
              <button class="action-btn"><i class="fa fa-comment-o"></i> 156</button>
              <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
            </div>
          </li>
          
          <!-- 2张图片 -->
          <li class="article-item img-count-2">
            <div class="article-header">
              <div class="article-author-avatar">陈</div>
              <div class="article-author-info">
                <div class="article-author">陈时尚</div>
                <div class="article-time">昨天 14:30</div>
              </div>
            </div>
            <div class="article-content">
              <div class="article-title">夏季通勤穿搭，舒适又时尚的5种搭配</div>
              <div class="article-excerpt">上班通勤既要舒适方便，又想保持时尚感？这几套搭配方案让你轻松应对夏季职场穿搭...</div>
              <div class="article-images">
                <div class="article-image" style="background-image: url('https://picsum.photos/id/64/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/65/800/600');"></div>
              </div>
            </div>
            <div class="article-actions">
              <button class="action-btn"><i class="fa fa-thumbs-o-up"></i> 876</button>
              <button class="action-btn"><i class="fa fa-comment-o"></i> 215</button>
              <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
            </div>
          </li>
          
          <!-- 4张图片 -->
          <li class="article-item img-count-4">
            <div class="article-header">
              <div class="article-author-avatar">刘</div>
              <div class="article-author-info">
                <div class="article-author">刘美妆</div>
                <div class="article-time">06-12</div>
              </div>
            </div>
            <div class="article-content">
              <div class="article-title">适合新手的日常淡妆教程，5分钟快速搞定</div>
              <div class="article-excerpt">不需要复杂步骤，简单几步就能打造自然清透的日常妆容，让你看起来精神饱满又不夸张...</div>
              <div class="article-images">
                <div class="article-image" style="background-image: url('https://picsum.photos/id/91/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/92/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/93/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/94/800/600');"></div>
              </div>
            </div>
            <div class="article-actions">
              <button class="action-btn"><i class="fa fa-thumbs-o-up"></i> 1245</button>
              <button class="action-btn"><i class="fa fa-comment-o"></i> 328</button>
              <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
            </div>
          </li>
          
          <!-- 7张图片 -->
          <li class="article-item img-count-7">
            <div class="article-header">
              <div class="article-author-avatar">黄</div>
              <div class="article-author-info">
                <div class="article-author">黄生活</div>
                <div class="article-time">06-10</div>
              </div>
            </div>
            <div class="article-content">
              <div class="article-title">出租屋改造记，小空间也能有大变化</div>
              <div class="article-excerpt">不用大动干戈，只需几个简单的改造和布置，就能让小小的出租屋变得温馨舒适，充满个人风格...</div>
              <div class="article-images">
                <div class="article-image" style="background-image: url('https://picsum.photos/id/163/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/164/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/165/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/166/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/167/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/168/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/169/800/600');"></div>
              </div>
            </div>
            <div class="article-actions">
              <button class="action-btn"><i class="fa fa-thumbs-o-up"></i> 963</button>
              <button class="action-btn"><i class="fa fa-comment-o"></i> 256</button>
              <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
            </div>
          </li>
        </ul>
        
        <div class="load-more">
          <button class="load-more-btn" id="loadMore2">
            加载更多
          </button>
        </div>
      </div>
    </div>
    
    <!-- 风格3：生态绿 -->
    <div class="article-page" id="page3">
      <div class="page-header">
        <h1 class="page-title">自然与生活</h1>
        <div class="header-actions">
          <button class="header-btn" id="refresh3"><i class="fa fa-refresh"></i></button>
          <button class="header-btn" id="menu3"><i class="fa fa-ellipsis-v"></i></button>
        </div>
      </div>
      
      <div class="search-bar">
        <input type="text" class="search-input" placeholder="搜索自然、环保相关内容...">
      </div>
      
      <div class="category-bar">
        <div class="category-scroll">
          <button class="category-btn active">全部</button>
          <button class="category-btn">自然</button>
          <button class="category-btn">环保</button>
          <button class="category-btn">园艺</button>
          <button class="category-btn">有机</button>
          <button class="category-btn">可持续</button>
          <button class="category-btn">户外</button>
        </div>
      </div>
      
      <div class="content">
        <ul class="article-list" id="articleList3">
          <!-- 0张图片 -->
          <li class="article-item img-count-0">
            <div class="article-header">
              <div class="article-author-avatar">杨</div>
              <div class="article-author-info">
                <div class="article-author">杨自然</div>
                <div class="article-time">今天 07:45</div>
              </div>
            </div>
            <div class="article-content">
              <div class="article-title">如何减少日常生活中的塑料使用</div>
              <div class="article-excerpt">塑料污染已经成为全球性环境问题，从日常小事做起，减少塑料使用，为地球减负。本文分享10个实用的减塑小方法...</div>
            </div>
            <div class="article-actions">
              <button class="action-btn"><i class="fa fa-thumbs-o-up"></i> 324</button>
              <button class="action-btn"><i class="fa fa-comment-o"></i> 78</button>
              <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
            </div>
          </li>
          
          <!-- 3张图片 -->
          <li class="article-item img-count-3">
            <div class="article-header">
              <div class="article-author-avatar">吴</div>
              <div class="article-author-info">
                <div class="article-author">吴园艺</div>
                <div class="article-time">昨天 16:20</div>
              </div>
            </div>
            <div class="article-content">
              <div class="article-title">阳台小菜园打造指南，新手也能轻松上手</div>
              <div class="article-excerpt">即使只有小小的阳台空间，也能打造一个生机勃勃的小菜园，种上自己喜欢的蔬菜和香草，享受收获的乐趣...</div>
              <div class="article-images">
                <div class="article-image" style="background-image: url('https://picsum.photos/id/118/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/119/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/120/800/600');"></div>
              </div>
            </div>
            <div class="article-actions">
              <button class="action-btn"><i class="fa fa-thumbs-o-up"></i> 567</button>
              <button class="action-btn"><i class="fa fa-comment-o"></i> 124</button>
              <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
            </div>
          </li>
          
          <!-- 5张图片 -->
          <li class="article-item img-count-5">
            <div class="article-header">
              <div class="article-author-avatar">郑</div>
              <div class="article-author-info">
                <div class="article-author">郑环保</div>
                <div class="article-time">06-12</div>
              </div>
            </div>
            <div class="article-content">
              <div class="article-title">探访国家森林公园，记录自然之美</div>
              <div class="article-excerpt">周末走进国家森林公园，远离城市喧嚣，感受大自然的气息，用镜头记录下这些令人惊叹的自然景观...</div>
              <div class="article-images">
                <div class="article-image" style="background-image: url('https://picsum.photos/id/131/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/132/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/133/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/134/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/135/800/600');"></div>
              </div>
            </div>
            <div class="article-actions">
              <button class="action-btn"><i class="fa fa-thumbs-o-up"></i> 432</button>
              <button class="action-btn"><i class="fa fa-comment-o"></i> 89</button>
              <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
            </div>
          </li>
          
          <!-- 8张图片 -->
          <li class="article-item img-count-8">
            <div class="article-header">
              <div class="article-author-avatar">周</div>
              <div class="article-author-info">
                <div class="article-author">周户外</div>
                <div class="article-time">06-10</div>
              </div>
            </div>
            <div class="article-content">
              <div class="article-title">徒步原始森林，发现多样生物世界</div>
              <div class="article-excerpt">深入原始森林，感受大自然的生命力，这里生活着许多珍稀动植物，每一步都是新的发现...</div>
              <div class="article-images">
                <div class="article-image" style="background-image: url('https://picsum.photos/id/142/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/143/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/144/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/145/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/146/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/147/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/148/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/149/800/600');"></div>
              </div>
            </div>
            <div class="article-actions">
              <button class="action-btn"><i class="fa fa-thumbs-o-up"></i> 678</button>
              <button class="action-btn"><i class="fa fa-comment-o"></i> 156</button>
              <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
            </div>
          </li>
        </ul>
        
        <div class="load-more">
          <button class="load-more-btn" id="loadMore3">
            加载更多
          </button>
        </div>
      </div>
    </div>
    
    <!-- 风格4：温暖橙 -->
    <div class="article-page" id="page4">
      <div class="page-header">
        <h1 class="page-title">美食与烹饪</h1>
        <div class="header-actions">
          <button class="header-btn" id="refresh4"><i class="fa fa-refresh"></i></button>
          <button class="header-btn" id="menu4"><i class="fa fa-ellipsis-v"></i></button>
        </div>
      </div>
      
      <div class="search-bar">
        <input type="text" class="search-input" placeholder="搜索美食食谱...">
      </div>
      
      <div class="category-bar">
        <div class="category-scroll">
          <button class="category-btn active">全部</button>
          <button class="category-btn">早餐</button>
          <button class="category-btn">家常菜</button>
          <button class="category-btn">烘焙</button>
          <button class="category-btn">甜点</button>
          <button class="category-btn">素食</button>
          <button class="category-btn">饮品</button>
        </div>
      </div>
      
      <div class="content">
        <ul class="article-list" id="articleList4">
          <!-- 0张图片 -->
          <li class="article-item img-count-0">
            <div class="article-header">
              <div class="article-author-avatar">朱</div>
              <div class="article-author-info">
                <div class="article-author">朱大厨</div>
                <div class="article-time">今天 08:10</div>
              </div>
            </div>
            <div class="article-content">
              <div class="article-title">厨房新手必备的10个烹饪技巧</div>
              <div class="article-excerpt">刚开始学做饭？这些实用的烹饪技巧能让你的厨艺快速提升，从切菜到调味，掌握这些基础让你少走弯路...</div>
            </div>
            <div class="article-actions">
              <button class="action-btn"><i class="fa fa-thumbs-o-up"></i> 876</button>
              <button class="action-btn"><i class="fa fa-comment-o"></i> 215</button>
              <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
            </div>
          </li>
          
          <!-- 1张图片 -->
          <li class="article-item img-count-1">
            <div class="article-header">
              <div class="article-author-avatar">胡</div>
              <div class="article-author-info">
                <div class="article-author">胡早餐</div>
                <div class="article-time">昨天 07:30</div>
              </div>
            </div>
            <div class="article-content">
              <div class="article-title">15分钟快手早餐，营养又美味</div>
              <div class="article-excerpt">早上时间紧张？这款快手早餐做法简单，营养均衡，让你每天都能从容地吃好早餐再出门...</div>
              <div class="article-images">
                <div class="article-image" style="background-image: url('https://picsum.photos/id/292/800/600');"></div>
              </div>
            </div>
            <div class="article-actions">
              <button class="action-btn"><i class="fa fa-thumbs-o-up"></i> 1243</button>
              <button class="action-btn"><i class="fa fa-comment-o"></i> 326</button>
              <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
            </div>
          </li>
          
          <!-- 6张图片 -->
          <li class="article-item img-count-6">
            <div class="article-header">
              <div class="article-author-avatar">郭</div>
              <div class="article-author-info">
                <div class="article-author">郭烘焙</div>
                <div class="article-time">06-12</div>
              </div>
            </div>
            <div class="article-content">
              <div class="article-title">零基础也能做的草莓蛋糕，步骤详解</div>
              <div class="article-excerpt">不需要专业烘焙工具，在家就能做出颜值高、味道好的草莓蛋糕，详细步骤让你一次成功...</div>
              <div class="article-images">
                <div class="article-image" style="background-image: url('https://picsum.photos/id/291/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/292/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/293/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/294/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/295/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/296/800/600');"></div>
              </div>
            </div>
            <div class="article-actions">
              <button class="action-btn"><i class="fa fa-thumbs-o-up"></i> 1567</button>
              <button class="action-btn"><i class="fa fa-comment-o"></i> 432</button>
              <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
            </div>
          </li>
          
          <!-- 9张图片 -->
          <li class="article-item img-count-9">
            <div class="article-header">
              <div class="article-author-avatar">徐</div>
              <div class="article-author-info">
                <div class="article-author">徐家常菜</div>
                <div class="article-time">06-10</div>
              </div>
            </div>
            <div class="article-content">
              <div class="article-title">一周家常菜食谱，每天不重样</div>
              <div class="article-excerpt">不知道每天做什么菜？这份一周家常菜食谱帮你解决烦恼，简单易做，营养搭配合理，适合家庭日常...</div>
              <div class="article-images">
                <div class="article-image" style="background-image: url('https://picsum.photos/id/292/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/293/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/294/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/295/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/296/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/297/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/298/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/299/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/300/800/600');"></div>
              </div>
            </div>
            <div class="article-actions">
              <button class="action-btn"><i class="fa fa-thumbs-o-up"></i> 2154</button>
              <button class="action-btn"><i class="fa fa-comment-o"></i> 567</button>
              <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
            </div>
          </li>
        </ul>
        
        <div class="load-more">
          <button class="load-more-btn" id="loadMore4">
            加载更多
          </button>
        </div>
      </div>
    </div>
    
    <!-- 风格5：梦幻紫 -->
    <div class="article-page" id="page5">
      <div class="page-header">
        <h1 class="page-title">创意与设计</h1>
        <div class="header-actions">
          <button class="header-btn" id="refresh5"><i class="fa fa-refresh"></i></button>
          <button class="header-btn" id="menu5"><i class="fa fa-ellipsis-v"></i></button>
        </div>
      </div>
      
      <div class="search-bar">
        <input type="text" class="search-input" placeholder="搜索创意灵感...">
      </div>
      
      <div class="category-bar">
        <div class="category-scroll">
          <button class="category-btn active">全部</button>
          <button class="category-btn">插画</button>
          <button class="category-btn">摄影</button>
          <button class="category-btn">手工</button>
          <button class="category-btn">设计</button>
          <button class="category-btn">创意</button>
          <button class="category-btn">艺术</button>
        </div>
      </div>
      
      <div class="content">
        <ul class="article-list" id="articleList5">
          <!-- 0张图片 -->
          <li class="article-item img-count-0">
            <div class="article-header">
              <div class="article-author-avatar">高</div>
              <div class="article-author-info">
                <div class="article-author">高创意</div>
                <div class="article-time">今天 10:20</div>
              </div>
            </div>
            <div class="article-content">
              <div class="article-title">激发创意的7个小方法，突破思维瓶颈</div>
              <div class="article-excerpt">创意不是凭空而来的，通过一些简单的方法和习惯，你可以培养自己的创意思维，在工作和生活中获得更多灵感...</div>
            </div>
            <div class="article-actions">
              <button class="action-btn"><i class="fa fa-thumbs-o-up"></i> 456</button>
              <button class="action-btn"><i class="fa fa-comment-o"></i> 103</button>
              <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
            </div>
          </li>
          
          <!-- 2张图片 -->
          <li class="article-item img-count-2">
            <div class="article-header">
              <div class="article-author-avatar">林</div>
              <div class="article-author-info">
                <div class="article-author">林插画</div>
                <div class="article-time">昨天 16:45</div>
              </div>
            </div>
            <div class="article-content">
              <div class="article-title">数字插画创作过程分享，从构思到完成</div>
              <div class="article-excerpt">一幅插画作品是如何诞生的？分享我的创作思路和步骤，从灵感来源到最终完成的全过程...</div>
              <div class="article-images">
                <div class="article-image" style="background-image: url('https://picsum.photos/id/96/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/97/800/600');"></div>
              </div>
            </div>
            <div class="article-actions">
              <button class="action-btn"><i class="fa fa-thumbs-o-up"></i> 876</button>
              <button class="action-btn"><i class="fa fa-comment-o"></i> 234</button>
              <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
            </div>
          </li>
          
          <!-- 4张图片 -->
          <li class="article-item img-count-4">
            <div class="article-header">
              <div class="article-author-avatar">罗</div>
              <div class="article-author-info">
                <div class="article-author">罗手工</div>
                <div class="article-time">06-12</div>
              </div>
            </div>
            <div class="article-content">
              <div class="article-title">创意手工：旧物改造的艺术之美</div>
              <div class="article-excerpt">不起眼的旧物经过巧妙改造，就能变成实用又美观的艺术品。分享几个简单又有趣的旧物改造创意...</div>
              <div class="article-images">
                <div class="article-image" style="background-image: url('https://picsum.photos/id/175/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/176/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/177/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/178/800/600');"></div>
              </div>
            </div>
            <div class="article-actions">
              <button class="action-btn"><i class="fa fa-thumbs-o-up"></i> 654</button>
              <button class="action-btn"><i class="fa fa-comment-o"></i> 178</button>
              <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
            </div>
          </li>
          
          <!-- 7张图片 -->
          <li class="article-item img-count-7">
            <div class="article-header">
              <div class="article-author-avatar">梁</div>
              <div class="article-author-info">
                <div class="article-author">梁摄影</div>
                <div class="article-time">06-10</div>
              </div>
            </div>
            <div class="article-content">
              <div class="article-title">城市夜景摄影技巧，捕捉夜晚的魅力</div>
              <div class="article-excerpt">夜晚的城市有着不同于白天的魅力，掌握这些摄影技巧，让你的夜景照片更加出色，记录城市的璀璨时刻...</div>
              <div class="article-images">
                <div class="article-image" style="background-image: url('https://picsum.photos/id/42/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/43/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/44/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/45/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/46/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/47/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/48/800/600');"></div>
              </div>
            </div>
            <div class="article-actions">
              <button class="action-btn"><i class="fa fa-thumbs-o-up"></i> 987</button>
              <button class="action-btn"><i class="fa fa-comment-o"></i> 245</button>
              <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
            </div>
          </li>
        </ul>
        
        <div class="load-more">
          <button class="load-more-btn" id="loadMore5">
            加载更多
          </button>
        </div>
      </div>
    </div>
    
    <!-- 风格6：商务黑 -->
    <div class="article-page" id="page6">
      <div class="page-header">
        <h1 class="page-title">商业与职场</h1>
        <div class="header-actions">
          <button class="header-btn" id="refresh6"><i class="fa fa-refresh"></i></button>
          <button class="header-btn" id="menu6"><i class="fa fa-ellipsis-v"></i></button>
        </div>
      </div>
      
      <div class="search-bar">
        <input type="text" class="search-input" placeholder="搜索商业资讯、职场技巧...">
      </div>
      
      <div class="category-bar">
        <div class="category-scroll">
          <button class="category-btn active">全部</button>
          <button class="category-btn">管理</button>
          <button class="category-btn">营销</button>
          <button class="category-btn">创业</button>
          <button class="category-btn">职场</button>
          <button class="category-btn">财经</button>
          <button class="category-btn">科技</button>
        </div>
      </div>
      
      <div class="content">
        <ul class="article-list" id="articleList6">
          <!-- 0张图片 -->
          <li class="article-item img-count-0">
            <div class="article-header">
              <div class="article-author-avatar">马</div>
              <div class="article-author-info">
                <div class="article-author">马职场</div>
                <div class="article-time">今天 09:30</div>
              </div>
            </div>
            <div class="article-content">
              <div class="article-title">职场新人必备的5个沟通技巧</div>
              <div class="article-excerpt">良好的沟通能力是职场成功的关键，尤其对于新人来说，掌握这些沟通技巧能让你更快融入团队，获得认可...</div>
            </div>
            <div class="article-actions">
              <button class="action-btn"><i class="fa fa-thumbs-o-up"></i> 765</button>
              <button class="action-btn"><i class="fa fa-comment-o"></i> 198</button>
              <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
            </div>
          </li>
          
          <!-- 3张图片 -->
          <li class="article-item img-count-3">
            <div class="article-header">
              <div class="article-author-avatar">张</div>
              <div class="article-author-info">
                <div class="article-author">张管理</div>
                <div class="article-time">昨天 14:20</div>
              </div>
            </div>
            <div class="article-content">
              <div class="article-title">高效团队管理的核心要素与实践方法</div>
              <div class="article-excerpt">优秀的团队不是天生的，而是通过科学的管理方法打造的。本文分享打造高效团队的核心要素和实用管理技巧...</div>
              <div class="article-images">
                <div class="article-image" style="background-image: url('https://picsum.photos/id/26/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/27/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/28/800/600');"></div>
              </div>
            </div>
            <div class="article-actions">
              <button class="action-btn"><i class="fa fa-thumbs-o-up"></i> 987</button>
              <button class="action-btn"><i class="fa fa-comment-o"></i> 256</button>
              <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
            </div>
          </li>
          
          <!-- 5张图片 -->
          <li class="article-item img-count-5">
            <div class="article-header">
              <div class="article-author-avatar">王</div>
              <div class="article-author-info">
                <div class="article-author">王创业</div>
                <div class="article-time">06-12</div>
              </div>
            </div>
            <div class="article-content">
              <div class="article-title">从零开始的创业历程，我的5年经验总结</div>
              <div class="article-excerpt">创业之路充满挑战，分享我从一个想法到公司稳定运营的5年历程，包括遇到的困难和宝贵经验...</div>
              <div class="article-images">
                <div class="article-image" style="background-image: url('https://picsum.photos/id/180/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/181/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/182/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/183/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/184/800/600');"></div>
              </div>
            </div>
            <div class="article-actions">
              <button class="action-btn"><i class="fa fa-thumbs-o-up"></i> 1245</button>
              <button class="action-btn"><i class="fa fa-comment-o"></i> 342</button>
              <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
            </div>
          </li>
          
          <!-- 8张图片 -->
          <li class="article-item img-count-8">
            <div class="article-header">
              <div class="article-author-avatar">赵</div>
              <div class="article-author-info">
                <div class="article-author">赵营销</div>
                <div class="article-time">06-10</div>
              </div>
            </div>
            <div class="article-content">
              <div class="article-title">数字化营销全攻略，从策略到执行</div>
              <div class="article-excerpt">在数字化时代，营销策略也需要与时俱进。本文详细介绍现代数字化营销的核心方法和执行步骤...</div>
              <div class="article-images">
                <div class="article-image" style="background-image: url('https://picsum.photos/id/201/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/202/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/203/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/204/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/205/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/206/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/207/800/600');"></div>
                <div class="article-image" style="background-image: url('https://picsum.photos/id/208/800/600');"></div>
              </div>
            </div>
            <div class="article-actions">
              <button class="action-btn"><i class="fa fa-thumbs-o-up"></i> 1567</button>
              <button class="action-btn"><i class="fa fa-comment-o"></i> 423</button>
              <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
            </div>
          </li>
        </ul>
        
        <div class="load-more">
          <button class="load-more-btn" id="loadMore6">
            加载更多
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前状态
    let currentStyle = 1;
    
    // 文章数据 - 包含不同图片数量的文章
    const articleData = [
      {
        imgCount: 0,
        author: "刘专家",
        authorAvatar: "刘",
        time: "06-08 11:30",
        title: "数据分析在现代企业中的应用与价值",
        excerpt: "随着大数据时代的到来，数据分析成为企业决策的重要依据。本文探讨数据分析如何帮助企业提升效率、降低成本并发现新的商业机会...",
        likes: 543,
        comments: 127,
      },
      {
        imgCount: 2,
        author: "陈旅行",
        authorAvatar: "陈",
        time: "06-07 09:45",
        title: "北欧极简设计风格解析与家居应用",
        excerpt: "北欧风格以其简洁、实用和自然的特点受到全球欢迎。本文解析北欧设计的核心要素，以及如何在家居中应用这种风格...",
        likes: 765,
        comments: 213,
        images: [106, 107]
      },
      {
        imgCount: 4,
        author: "周健康",
        authorAvatar: "周",
        time: "06-05 16:20",
        title: "办公室健康指南：预防久坐带来的健康问题",
        excerpt: "长时间久坐对健康有诸多危害，尤其对办公室人群。本文提供实用的办公室健康小技巧，帮助你在工作中保持健康...",
        likes: 432,
        comments: 98,
        images: [186, 187, 188, 189]
      },
      {
        imgCount: 6,
        author: "吴科技",
        authorAvatar: "吴",
        time: "06-03 14:10",
        title: "年度科技产品评测：从手机到智能家居",
        excerpt: "本年度多款科技产品发布，本文对热门产品进行全面评测，包括性能、设计和性价比，帮助你做出明智的购买决策...",
        likes: 876,
        comments: 321,
        images: [96, 97, 98, 99, 100, 101]
      }
    ];
    
    // DOM元素
    const switcherToggle = document.querySelector('.switcher-toggle');
    const switcher = document.querySelector('.style-switcher');
    const switcherClose = document.querySelector('.switcher-close');
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const articlePages = {
      1: document.getElementById('page1'),
      2: document.getElementById('page2'),
      3: document.getElementById('page3'),
      4: document.getElementById('page4'),
      5: document.getElementById('page5'),
      6: document.getElementById('page6')
    };
    const bodyElement = document.body;
    
    // 初始化
    function init() {
      // 切换器控制
      switcherToggle.addEventListener('click', toggleSwitcher);
      switcherClose.addEventListener('click', toggleSwitcher);
      
      // 切换样式
      switcherOptions.forEach(option => {
        option.addEventListener('click', function() {
          const style = parseInt(this.getAttribute('data-style'));
          switchStyle(style);
          toggleSwitcher();
        });
      });
      
      // 初始化所有页面的交互
      initPageInteractions();
    }
    
    // 初始化页面交互
    function initPageInteractions() {
      // 为每个页面初始化交互
      for (let i = 1; i <= 6; i++) {
        // 刷新按钮
        const refreshBtn = document.getElementById(`refresh${i}`);
        refreshBtn.addEventListener('click', function() {
          this.innerHTML = '<i class="fa fa-spinner loading"></i>';
          setTimeout(() => {
            this.innerHTML = '<i class="fa fa-refresh"></i>';
            alert('内容已更新');
          }, 1000);
        });
        
        // 菜单按钮
        const menuBtn = document.getElementById(`menu${i}`);
        menuBtn.addEventListener('click', function() {
          alert('打开文章列表菜单');
        });
        
        // 分类按钮
        const categoryBtns = document.querySelectorAll(`#page${i} .category-btn`);
        categoryBtns.forEach(btn => {
          btn.addEventListener('click', function() {
            // 移除其他按钮的active类
            categoryBtns.forEach(b => b.classList.remove('active'));
            // 给当前按钮添加active类
            this.classList.add('active');
            
            const category = this.textContent;
            alert(`切换到 ${category} 分类`);
          });
        });
        
        // 加载更多按钮
        const loadMoreBtn = document.getElementById(`loadMore${i}`);
        const articleList = document.getElementById(`articleList${i}`);
        
        loadMoreBtn.addEventListener('click', function() {
          // 显示加载中状态
          this.innerHTML = '<i class="fa fa-spinner loading"></i> 加载中...';
          this.disabled = true;
          
          // 模拟加载延迟
          setTimeout(() => {
            // 添加新文章
            articleData.forEach(article => {
              const li = document.createElement('li');
              li.className = `article-item img-count-${article.imgCount}`;
              
              // 构建图片HTML
              let imagesHtml = '';
              if (article.imgCount > 0 && article.images) {
                imagesHtml = '<div class="article-images">';
                article.images.forEach((id, index) => {
                  // 对于超过4张的图片，在最后一张显示剩余数量
                  const moreHtml = article.imgCount > 4 && index === article.images.length - 1 
                    ? `<div class="img-more">+${article.imgCount - 4}</div>` 
                    : '';
                  
                  imagesHtml += `
                    <div class="article-image" style="background-image: url('https://picsum.photos/id/${id}/800/600');">
                      ${moreHtml}
                    </div>
                  `;
                });
                imagesHtml += '</div>';
              }
              
              li.innerHTML = `
                <div class="article-header">
                  <div class="article-author-avatar">${article.authorAvatar}</div>
                  <div class="article-author-info">
                    <div class="article-author">${article.author}</div>
                    <div class="article-time">${article.time}</div>
                  </div>
                </div>
                <div class="article-content">
                  <div class="article-title">${article.title}</div>
                  <div class="article-excerpt">${article.excerpt}</div>
                  ${imagesHtml}
                </div>
                <div class="article-actions">
                  <button class="action-btn"><i class="fa fa-thumbs-o-up"></i> ${article.likes}</button>
                  <button class="action-btn"><i class="fa fa-comment-o"></i> ${article.comments}</button>
                  <button class="action-btn"><i class="fa fa-share-alt"></i> 分享</button>
                </div>
              `;
              
              // 添加文章点击事件
              li.addEventListener('click', function() {
                alert(`打开文章：${article.title}`);
              });
              
              articleList.appendChild(li);
            });
            
            // 恢复按钮状态
            this.innerHTML = '加载更多';
            this.disabled = false;
            
            // 模拟没有更多数据的情况
            if (articleList.children.length > 10) {
              this.innerHTML = '没有更多数据';
              this.disabled = true;
              this.style.color = 'var(--secondary)';
              this.style.borderColor = 'var(--border)';
            }
          }, 1000);
        });
        
        // 文章项点击事件
        const articleItems = document.querySelectorAll(`#page${i} .article-item`);
        articleItems.forEach(item => {
          item.addEventListener('click', function() {
            const title = this.querySelector('.article-title').textContent;
            alert(`打开文章：${title}`);
          });
        });
        
        // 文章操作按钮事件
        const actionBtns = document.querySelectorAll(`#page${i} .action-btn`);
        actionBtns.forEach(btn => {
          btn.addEventListener('click', function(e) {
            e.stopPropagation(); // 防止触发文章项点击事件
            
            if (this.querySelector('.fa-thumbs-o-up')) {
              // 点赞按钮
              this.classList.toggle('active');
              const countEl = this.childNodes[2];
              let count = parseInt(countEl.textContent.trim());
              
              if (this.classList.contains('active')) {
                countEl.textContent = ` ${count + 1}`;
                this.innerHTML = '<i class="fa fa-thumbs-up"></i> ' + (count + 1);
              } else {
                countEl.textContent = ` ${count - 1}`;
                this.innerHTML = '<i class="fa fa-thumbs-o-up"></i> ' + (count - 1);
              }
            } else if (this.querySelector('.fa-comment-o')) {
              // 评论按钮
              const title = this.closest('.article-item').querySelector('.article-title').textContent;
              alert(`查看 ${title} 的评论`);
            } else if (this.querySelector('.fa-share-alt')) {
              // 分享按钮
              const title = this.closest('.article-item').querySelector('.article-title').textContent;
              alert(`分享 ${title}`);
            }
          });
        });
      }
    }
    
    // 切换样式选择器显示/隐藏
    function toggleSwitcher() {
      switcher.classList.toggle('hidden');
    }
    
    // 关闭所有页面
    function closeAllPages() {
      Object.values(articlePages).forEach(page => {
        page.classList.remove('active');
      });
    }
    
    // 切换样式
    function switchStyle(style) {
      // 移除所有样式类
      bodyElement.classList.remove('style-1', 'style-2', 'style-3', 'style-4', 'style-5', 'style-6');
      
      // 添加当前样式类
      bodyElement.classList.add(`style-${style}`);
      
      // 更新当前样式
      currentStyle = style;
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (parseInt(option.getAttribute('data-style')) === style) {
          option.classList.add('active');
        }
      });
      
      // 显示对应页面
      closeAllPages();
      articlePages[style].classList.add('active');
    }
    
    // 键盘导航
    document.addEventListener('keydown', function(e) {
      if (e.key === 'ArrowLeft') {
        let prev = currentStyle - 1;
        if (prev < 1) prev = 6;
        switchStyle(prev);
      } else if (e.key === 'ArrowRight') {
        let next = currentStyle + 1;
        if (next > 6) next = 1;
        switchStyle(next);
      }
    });
    
    // 启动
    init();
  </script>
</body>
</html>
